const n = `
<template>
  <s-form colon="：">
    <s-form-item label="复选框形态">
      <s-radio-group v-model="options.variant" :options="variantList"></s-radio-group>
    </s-form-item>
    <s-form-item label="复选框形状">
      <s-radio-group v-model="options.shape" :options="shapeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="复选框主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="复选框位置">
      <s-radio-group v-model="options.position" :options="positionList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否块元素">
      <s-radio-group v-model="options.block" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="复选框示例">
      <s-flex
        :gap="options.variant === 'checkbox' ? '1em' : undefined"
        wrap="wrap"
        :style="{ width: '100%' }"
      >
        <s-checkbox
          v-model="options.value"
          :variant="options.variant"
          :shape="options.shape"
          :theme="options.theme"
          :position="options.position"
          :block="options.block"
          :readonly="options.readonly"
          :disabled="options.disabled"
          label="足球"
          >足球</s-checkbox
        >
        <s-checkbox
          v-model="options.value"
          :variant="options.variant"
          :shape="options.shape"
          :theme="options.theme"
          :position="options.position"
          :block="options.block"
          :readonly="options.readonly"
          :disabled="options.disabled"
          label="篮球"
          >篮球</s-checkbox
        >
        <s-checkbox
          v-model="options.value"
          :variant="options.variant"
          :shape="options.shape"
          :theme="options.theme"
          :position="options.position"
          :block="options.block"
          :readonly="options.readonly"
          :disabled="options.disabled"
          label="网球"
          >网球</s-checkbox
        >
        <s-checkbox
          v-model="options.value"
          :variant="options.variant"
          :shape="options.shape"
          :theme="options.theme"
          :position="options.position"
          :block="options.block"
          :readonly="options.readonly"
          :disabled="options.disabled"
          label="羽毛球"
          >羽毛球</s-checkbox
        >
        <s-checkbox
          v-model="options.value"
          :variant="options.variant"
          :shape="options.shape"
          :theme="options.theme"
          :position="options.position"
          :block="options.block"
          :readonly="options.readonly"
          :disabled="options.disabled"
          label="排球"
          >排球</s-checkbox
        >
      </s-flex>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  CHECKBOX_POSITION_DEFAULT,
  CHECKBOX_POSITION_LABEL,
  CHECKBOX_POSITION_OPTIONS,
  CHECKBOX_SHAPE_DEFAULT,
  CHECKBOX_SHAPE_LABEL,
  CHECKBOX_SHAPE_OPTIONS,
  CHECKBOX_THEME_DEFAULT,
  CHECKBOX_THEME_LABEL,
  CHECKBOX_THEME_OPTIONS,
  CHECKBOX_VARIANT_DEFAULT,
  CHECKBOX_VARIANT_LABEL,
  CHECKBOX_VARIANT_OPTIONS,
  type CheckboxValue,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultCheckbox extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = CHECKBOX_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: CHECKBOX_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 变体可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly variantList = CHECKBOX_VARIANT_OPTIONS.map((variant) => ({
    value: variant,
    label: CHECKBOX_VARIANT_LABEL.get(variant),
  }));

  /**
   * @description: 形状可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly shapeList = CHECKBOX_SHAPE_OPTIONS.map((shape) => ({
    value: shape,
    label: CHECKBOX_SHAPE_LABEL.get(shape),
  }));

  /**
   * @description: 变体可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly positionList = CHECKBOX_POSITION_OPTIONS.map((position) => ({
    value: position,
    label: CHECKBOX_POSITION_LABEL.get(position),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    theme: CHECKBOX_THEME_DEFAULT, // 复选框主题
    variant: CHECKBOX_VARIANT_DEFAULT, // 复选框变体
    shape: CHECKBOX_SHAPE_DEFAULT, // 复选框形状
    position: CHECKBOX_POSITION_DEFAULT, // 单选框位置
    block: false, // 是否块元素
    readonly: false, // 是否只读
    disabled: false, // 是否禁用
    value: ["足球", "网球"] as CheckboxValue, // 复选值
  };
}
<\/script>
`; export { n as default };
